<template>
	<view class="material-detail-view" v-if="info.id">
		<!-- 轮播 -->
		<view class="swiper-box" v-if="info.images_assets.length>0">
			<swiper class="index-swiper" :style="{height: swiperHeight + 'px'}" :autoplay="true" circular
				:interval="5000" :duration="200" @change="swiperChange">
				<swiper-item v-for="(item, index) in info.images_assets" :key="index">
					<image :src="item.url" mode="aspectFill" @click.stop="$api.toPrewImgArr(info.images_assets,index)">
					</image>
				</swiper-item>
			</swiper>
			<view class="swiper-radius">
				<block v-for="(item, index) in info.images_assets" :key="index">
					<view :class="{ dot_select: swiperSelect === index }"></view>
				</block>
			</view>
		</view>
		<view class="detail-content">
			<view class="detail-title">{{info.title}}</view>
			<view class="detail-type">{{getTagText}}</view>
			<view class="detail-desc">{{info.body}}</view>
		</view>
		<view class="detail-btn">
			<van-button block plain color="#161616" :custom-style="btnStyle" @click="downloadImg">一键下载配图</van-button>
			<van-button block color="#4078E5" :custom-style="btnStyle" @click="copyText">一键复制文案</van-button>
		</view>
	</view>
</template>

<script>
	let screenWidth = uni.getWindowInfo().screenWidth
	export default {
		data() {
			return {
				swiperSelect: 0,
				btnStyle: 'height: 80rpx;border-radius: 4rpx;font-weight: bold;',
				info: {},
				swiperHeight: 0
			};
		},
		onLoad(e) {
			if (e.id) {
				this.getDetail(e.id)
			}
		},
		computed: {
			getTagText() {
				return this.info.tags.map(item => {
					return item.name
				}).join(' | ')
			}
		},
		methods: {
			getDetail(id) {
				this.$api.requst(`/gwc/projects/material/${id}`, {
					id: id
				}).then((res) => {
					this.info = res.data
					if (this.info.images_assets.length > 0) {
						let rate = Number(this.info.images_assets[0].width) / Number(screenWidth)
						this.swiperHeight = Number(this.info.images_assets[0].height) / Number(rate)
					}
				})
			},
			// 轮播切换
			swiperChange(e) {
				this.swiperSelect = e.detail.current
				let rate = Number(this.info.images_assets[this.swiperSelect].width) / Number(screenWidth)
				this.swiperHeight = Number(this.info.images_assets[this.swiperSelect].height) / Number(rate)
			},
			// 下载配图
			async downloadImg() {
				let imgArr = this.info.images_assets
				if (imgArr.length > 0) {
					for (let i = 0; i < imgArr.length; i++) {
						await this.$api.downImg(imgArr[i].url)
					}
				} else {
					this.$api.showError('无可下载图片！')
				}
			},
			copyText() {
				this.$api.copyText(this.info.body)
			}
		}
	}
</script>

<style scoped lang="scss">
	.material-detail-view {
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		.swiper-box {
			position: relative;

			.index-swiper {
				width: 100%;
				height: 820rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-radius {
				margin-top: 50rpx;
				display: flex;
				justify-content: center;

				view {
					width: 48rpx;
					height: 4rpx;
					background: #D8D8D8;
					margin: 0 8rpx;
					float: left;
					-webkit-transition: 0.3s;
					transition: 0.3s;
				}

				.dot_select {
					background: #161616;
				}
			}
		}

		.detail-content {
			padding: 32rpx;

			.detail-title {
				font-weight: bold;
				font-size: 36rpx;
			}

			.detail-type {
				font-size: 26rpx;
				color: #8A8F99;
				margin-top: 24rpx;
			}

			.detail-desc {
				margin-top: 24rpx;
				font-size: 32rpx;
				line-height: 56rpx;
				white-space: pre-wrap;
			}
		}

		.detail-btn {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 24rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 32rpx 32rpx 80rpx;
			background-color: #fff;
		}
	}
</style>